<!-- 在线网页编辑器引入 -->
<link rel="stylesheet" href="/static/kindeditor/themes/default/default.css" />
<script src="/static/kindeditor/kindeditor-all-min.js"></script>
<script src="/static/kindeditor/lang/zh-CN.js"></script>
<script>
  var editor;
  KindEditor.ready(function(K){
    editor = K.create('textarea[name="content"]', {
      allowFileManager : true
    });
  })
</script>



<div class="fly-panel fly-column">
  <div class="layui-container">
    <ul class="layui-clear">
      <li class="layui-hide-xs {$cateid == 0 ? 'layui-this' : ''}">
        <a href="{:url('home/index/index')}">全部</a>
      </li>

      {foreach $catelist as $item}
        <li class="{$cateid == $item['id'] ? 'layui-this' : ''}"><a href="{:url('home/index/index',['cateid'=>$item['id']])}">{$item.name}</a></li>
      {/foreach}
      
      <!-- 用户登入后显示 -->
      {if condition="$Think.cookie.LoginUser"}
        <li class="layui-hide-xs layui-hide-sm layui-show-md-inline-block">
          <span class="fly-mid"></span>
        </li>
        <li class="layui-hide-xs layui-hide-sm layui-show-md-inline-block">
          <a href="{:url('home/post/index')}">我发表的贴</a>
        </li>
        <li class="layui-hide-xs layui-hide-sm layui-show-md-inline-block">
          <a href="{:url('home/post/collect')}">我收藏的贴</a>
        </li>
      {/if}
    </ul>
    
    <div class="fly-column-right layui-hide-xs"> 
      <span class="fly-search"><i class="layui-icon"></i></span> 
      <a href="{:url('home/post/add')}" class="layui-btn">发表新帖</a> 
    </div> 

    <div class="layui-hide-sm layui-show-xs-block" style="margin-top: -10px; padding-bottom: 10px; text-align: center;"> 
      <a href="{:url('home/post/add')}" class="layui-btn">发表新帖</a> 
    </div> 
  </div>
</div>

<!-- 帖子信息 -->
<div class="layui-container">
  <div class="layui-row layui-col-space15">
    <!-- 左侧 -->
    <div class="layui-col-md8 content detail">
      <div class="fly-panel detail-box">
        <!-- 标题 -->
        <h1>{$post.title}</h1>

        <!-- 帖子状态 -->
        <div class="fly-detail-info">
          {if condition="$post.accept"}
            <span class="layui-badge" style="background-color: #5FB878;">已结</span>
          {else /}
            <span class="layui-badge" style="background-color: #999;">未结</span>
          {/if}
          
          {if condition="$post.state eq 1"}
            <span class="layui-badge layui-bg-red">置顶</span>
          {elseif condition="$post.state eq 2" /}
            <span class="layui-badge layui-bg-green">精华</span>
          {elseif condition="$post.state eq 3" /}
            <span class="layui-badge layui-bg-black">热门</span>
          {/if}
          
          <span class="fly-list-nums">
            <!-- 评论数 -->
            <a href="#comment">
              <i class="iconfont" title="回答">&#xe60c;</i> {$count}
            </a>

            <!-- 访问次数 -->
            <i class="iconfont" title="人气">&#xe60b;</i> {$VisitCount}
          </span>
        </div>

        <!-- 用户信息 -->
        <div class="detail-about">
          <!-- 头像链接 -->
          <a class="fly-avatar" href="{:url('home/user/index',['userid'=>$post['userid']])}">
            {if condition="$post['user']['avatar']"}
              <img src="/{$post.user.avatar}" />
            {else /}
              <img src="/assets/home/images/avatar.jpg" />
            {/if}
          </a>
          
          <div class="fly-detail-user">
            <!-- 昵称 -->
            <a href="{:url('home/user/index',['userid'=>$post['userid']])}" class="fly-link">
              <cite>{$post.user.nickname}</cite>
              {if condition="$post.user['auth'] > 0"}
                <i class="iconfont icon-renzheng"></i>
              {/if}
            </a>

            <!-- 发布时间 -->
            <span>{$post.createtime}</span>
          </div>

          <!-- 帖子按钮 -->
          <div class="detail-hits" id="LAY_jieAdmin" data-id="123">
            <!-- 积分 -->
            <span style="padding-right: 10px; color: #FF7200">
              悬赏：<b>{$post.point}</b> 积分
            </span> 
            
            <!-- 登录的用户 和 发帖人的id相等时显示 -->
            {if condition="$Think.cookie.LoginUser['id']==$post.userid"}
              <span class="layui-btn layui-btn-xs jie-admin" type="edit">
                <a href="{:url('home/post/edit',['postid'=>$post['id']])}">编辑此贴</a>
              </span>

              <span class="layui-btn layui-btn-xs jie-admin layui-bg-red" type="edit" id="delpost">
                <a href="javascript:void(0)">删除</a>
              </span>
            {/if}

            {if condition="$Think.cookie.LoginUser"}
              {if condition="$CollectStatus"}
                <span class="layui-btn layui-btn-xs jie-admin layui-bg-black" type="edit" id="CollectDel">
                  <a href="javascript:void(0)">取消收藏</a>
                </span>
              {else /}
                <span class="layui-btn layui-btn-xs jie-admin layui-bg-blue" type="edit" id="CollectAdd">
                  <a href="javascript:void(0)">收藏</a>
                </span>
              {/if}
            {/if}
          </div>
        </div>

        <!-- 正文内容 -->
        <div class="detail-body photos">
          {$post.content}
        </div>
      </div>

      <div class="fly-panel detail-box" id="flyReply">
        <!-- 回帖的标题 -->
        <fieldset class="layui-elem-field layui-field-title" style="text-align: center;">
          <legend>回帖</legend>
        </fieldset>

        <ul class="jieda" id="jieda">
          {if condition="$commentlist"}
            {:CommentHtml($commentlist,$post)}
          {else /}
            <!-- 无数据时 -->
            <li class="fly-none">消灭零回复</li>
          {/if}
        </ul>
        
        <!-- 评论的表单 -->
        {if condition="$Think.cookie.LoginUser AND !$post['accept']"}
        <div id="comment" class="layui-form layui-form-pane">
          <form action="{:url('home/comment/add')}" method="post">
            <div class="layui-form-item">
              <h2 id="reply-nickname"></h2>
            </div>

            <div class="layui-form-item layui-form-text">
              <div class="layui-input-block">
                <textarea id="content" name="content" placeholder="请输入内容" class="layui-textarea" style="height: 150px;"></textarea>
              </div>
            </div>

            <div class="layui-form-item">
              <input type="hidden" name="pid" value="0" />
              <input type="hidden" name="postid" value="{$post.id}" />
              <button class="layui-btn" type="submit">提交回复</button>
            </div>
          </form>
        </div>
        {/if}
      </div>
    </div>

    <!-- 右侧 -->
    <div class="layui-col-md4">
      <dl class="fly-panel fly-list-one">
        <dt class="fly-panel-title">本周热议</dt>
        {if condition="$posthots"}
          {foreach $posthots as $item}
            <dd>
              <a href="{:url('home/index/info',['postid'=>$item['id']])}">{$item.title}</a>
              <span><i class="iconfont icon-pinglun1"></i> {$item.comment}</span>
            </dd>
          {/foreach}
        {else /}
          <!-- 无数据时 -->
          <div class="fly-none">没有相关数据</div>
        {/if}
      </dl>

      <!-- 公众号 -->
      <div class="fly-panel" style="padding: 20px 0; text-align: center;">
        <img src="/assets/home/images/weixin.jpg" style="max-width: 100%;" alt="layui">
        <p style="position: relative; color: #666;">微信扫码关注 layui 公众号</p>
      </div>
    </div>
  </div>
</div>

<script>
  layui.use('layer',function(){
    var layer=layui.layer
    var $=layui.jquery

    // 给删除按钮绑定事件
    $("#delpost").on('click',function(){
      layer.confirm('是否确认删除',{icon:3,title:'提示'},function(index){
        // 关闭弹幕
        layer.close(index)

        // 发送异步请求
        $.ajax({
          url:`{:url('home/post/del')}`,
          type:'post',
          data:`postid={$post.id}`,
          dataType:'json',
          success:function(success){
            if(success.result){
              // 成功
              layer.msg(success.msg,{
                icon:1,
                time:2000//2秒关闭 (如果不配置，默认是3秒)
              },function(){
                location.href="{:url('home/index/index')}"
                return false
              })
            }else{
              // 删除失败
              layer.msg(success.msg)
            }
          }
        })
      })
    })


    // 添加收藏
    $("#CollectAdd").on('click',function(){
      // 发送异步请求
      $.ajax({
        url:`{:url('home/collect/add')}`,
        type:'post',
        data:`postid={$post.id}`,
        dataType:'json',
        success:function(success){
          if(success.result){
            // 成功
            layer.msg(success.msg,{
              icon:1,
              time:2000
            },function(){
              // 直接刷新界面
              location.reload()
            })
          }else{
            // 删除失败
            layer.msg(success.msg)
          }
        }
      })
    })

    // 取消收藏
    $("#CollectDel").on('click', function(){
        //发送异步请求
        $.ajax({
          url:`{:url('home/collect/Del')}`,
          type:'post',
          data:`postid={$post.id}`,
          dataType:'json',
          success:function(success)
          {
            if(success.result)
            {
              //成功
              layer.msg(success.msg, {
                icon: 1,
                time: 2000 //2秒关闭（如果不配置，默认是3秒）
              }, function(){
                //直接刷新界面
                location.reload()
              })
            }else
            {
              //删除失败
              layer.msg(success.msg)
            }
          }
        })
    })
    
    // 点赞
    $(".like").on('click',function(){
      var commentid=$(this).data('commentid')
      // 发送异步请求
      $.ajax({
        url:`{:url('home/likes/add')}`,
        type:'post',
        data:`id=${commentid}`,
        dataType:'json',
        success:function(success){
          if(success.result){
            // 成功
            location.reload()
          }else{
            // 删除失败
            layer.msg(success.msg)
          }
        }
      })
    })

    // 添加回复
    $(".reply").on('click',function(){
      var pid=$(this).data('pid')
      var nickname=$(this).data('nickname')

      // 设置隐藏域
      $(`input[name='pid']`).val(pid)

      $(`#reply-nickname`).html(`回复给：${nickname}`)

      // 让编辑器产生出来
      editor.focus()
    })


    // 采纳
    $(".accept").on('click', function(){

      var $dom = $(this)

      layer.confirm('是否确认采纳答案，积分将打到对应账号', { icon: 3, title: '提示' }, function (index) {

        //评论id
        var comid = $dom.data('comid')

        //关闭弹框
        layer.close(index)

        //发送异步请求
        $.ajax({
          url: `{:url('home/comment/accept')}`,
          type: 'post',
          data: `comid=${comid}`,
          dataType: 'json',
          success: function (success) {
            if (success.result) {
              //成功
              layer.msg(success.msg, {
                icon: 1,
                time: 2000 //2秒关闭（如果不配置，默认是3秒）
              }, function () {
                location.reload()
              })
            } else {
              //失败
              layer.msg(success.msg)
            }
          }
        })
      })
    })
    
    // 删除评论    
    $(".CommentDel").on('click', function(){
      var commentid=$(this).data('commentid')
      //发送异步请求
      $.ajax({
        url:`{:url('home/post/commentdel')}`,
        type:'post',
        data:`id=${commentid}`,
        dataType:'json',
        success:function(success)
        {
          if(success.result)
          {
            //成功
            layer.msg(success.msg, {
              icon: 1,
              time: 2000 //2秒关闭（如果不配置，默认是3秒）
            }, function(){
              //直接刷新界面
              location.reload()
            })
          }else
          {
            //删除失败
            layer.msg(success.msg)
          }
        }
      })
    })
  })
</script>
